<script setup lang="ts">
import { ref, onMounted } from "vue";
import { array } from "vue-types";
import ReCol from "@/components/ReCol";
import { useVirtualList } from "@vueuse/core";

import { getAllDeliverList } from "@/api/dashboard";

import { DeliverFormProps } from "../utils/types";
import { createDeliverRules } from "../utils/rule";

/** 物流公司列表 */
const deliverList = ref([]);

const props = withDefaults(defineProps<DeliverFormProps>(), {
  formInline: () => ({
    title: "",
    /**商品id列表 */
    fgoodsids: "",
    /**订单号 */
    orderno: "",
    /**物流公司编号 */
    comcode: "",
    /**物流单号 */
    trackingnum: "",
    /**联系电话 后四位 */
    phone: ""
  })
});

const newFormInline = ref(props.formInline);

const ruleFormRef = ref();

const deliverOptions = [
  { comcode: "shunfeng", comname: "顺丰速运-SF" },
  { comcode: "shunfengkuaiyun", comname: "顺丰快运-SF" },
  { comcode: "jd", comname: "京东快递-JD" },
  { comcode: "debangwuliu", comname: "德邦物流-DB" },
  { comcode: "自送", comname: "自送-Z" }
];
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });

const { list, containerProps, wrapperProps } = useVirtualList(deliverList, {
  itemHeight: 22
});

onMounted(() => {
  getAllDeliverList().then(res => {
    deliverList.value = res.data;
  });
});
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :rules="createDeliverRules"
    :model="newFormInline"
    label-width="96px"
  >
    <el-row :gutter="30">
      <re-col :value="24">
        <el-form-item label="商品ID">
          <el-input v-model="newFormInline.fgoodsids" :disabled="true" />
        </el-form-item>
      </re-col>
      <re-col :value="24">
        <el-form-item label="订单号">
          <el-input v-model="newFormInline.orderno" :disabled="true" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="物流公司" prop="comcode">
          <el-select-v2
            v-model="newFormInline.comcode"
            :options="deliverOptions"
            :props="{ value: 'comcode', label: 'comname' }"
            placeholder="请选择物流公司"
            filterable
            size="default"
            style="width: 240px"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24">
        <el-form-item label="物流单号" prop="trackingnum">
          <el-input
            v-model="newFormInline.trackingnum"
            placeholder="请输入物流单号"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24">
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="newFormInline.phone"
            placeholder="请输入收件人电话后四位"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped></style>
